<!-- 党建 -->
<template>
    <AllOut>
        <div>
            <TopNav :show_links="true"></TopNav>
            <div class="index-image">
                <el-carousel height="550px">
                    <el-carousel-item v-for="(item, key) in imageDataHeader" :key="key">
                        <img class="index_top_bg_img" :src="item.bannerFileUrl" alt="">
                    </el-carousel-item>
                </el-carousel>
                <div class="navHader">
                    <Nav :nav_value="1"></Nav>
                </div>
            </div>
            <div class="content_out index_content" v-loading="loading">
                <b-container fluid>
                    <!-- Content here -->
                    <div class="flex jcc dangjian-main aic" v-if="detailValue">
                        <img src="/img/start5.png" alt="" srcset="">
                        <p>党建引领</p>
                    </div>
                    <ul class="" v-infinite-scroll="load" style="max-height: 3320px;overflow-y: auto;overflow-x: hidden;"
                        v-if="detailValue">
                        <b-row>
                            <b-col md="12" sm="12" class="">
                                <div class="dangjian_main flex" v-for="(item, index) in dangjianData" :key="index">
                                    <div class="dangjian_img">
                                        <b-img :src="item.newsTitleFileUrl" />
                                    </div>
                                    <div class="dangjian_right">
                                        <p class="dangjian_right_title fontz">{{ item.newsTitle }}</p>
                                        <p class="dangjian_right_time fontz">{{ item.createTime }}</p>
                                        <div class="dangjian_btn fontz flex jcc aic" @click="detailClick(index)">
                                            查看详情
                                            <b-img src="/img/r2.png" />
                                        </div>
                                    </div>
                                </div>
                            </b-col>
                        </b-row>
                    </ul>

                    <b-row v-if="!detailValue">
                        <b-col md="12" sm="12" class="">
                            <div class="dangjain_detail_nav flex aic">
                                <img src="/img/back.png" alt="" @click="back()">
                                <span class="fontz">当前位置</span>
                                <img src="/img/r2.png" alt="">
                                <span class="fontz" @click="back()">党建引领</span>
                                <img src="/img/r2.png" alt="">
                                <span class="fontz">{{ detailData.newsTitle }}</span>
                            </div>
                            <div class="dangjian_detail_main">
                                <div class="dangjian_detail_mains">
                                    <h2 class="dangjian_detail_mains_1 fontz">{{ detailData.newsTitle }}</h2>
                                    <div class="dangjian_detail_mains_2 fontz">
                                        来源：{{ detailData.newsSource }} 发布时间：{{ detailData.createTime }} 浏览量：{{
                                            detailData.viewNumber }}
                                    </div>
                                    <p class="dangjian_detail_mains_3 fontz">
                                        {{ detailData.newsContents }}
                                    </p>
                                    <div class="flex jcc">
                                        <b-img :src="detailData.newsTitleFileUrl" alt="" srcset="" />
                                    </div>
                                </div>
                                <div class="dangjian_detail_main_footer flex jcsb aic">
                                    <span class="fontz" @click="goclick(0)">上一篇：{{ indexValue == 0 ? "无" :
                                        dangjianData[indexValue - 1].newsTitle
                                    }}</span>
                                    <span class="fontz" @click="goclick(1)">下一篇：{{ indexValue == dangjianData.length - 1 ?
                                        "无" : dangjianData[indexValue + 1].newsTitle
                                    }}</span>
                                </div>
                            </div>
                        </b-col>
                    </b-row>
                </b-container>
            </div>
        </div>
    </AllOut>
</template>
  
<script>
import { partyBanner, partyNews, partyNewsId } from "@/api/index"

export default {
    name: 'dangjian',
    async asyncData() {
        const partyBannerData = await partyBanner()
        // const partyNewsData = await partyNews({})
        // return { partyBannerData, partyNewsData }
        return { partyBannerData }
    },
    data() {
        return {
            partyBannerData: {},
            partyNewsData: {},
            dangjianData: [],
            detailValue: true,
            detailData: {},
            indexValue: 0,
            ruleFrom: {
                pageNum: 1,
                pageSize: 1
            },
            loading: false
        }
    },
    created() {
        this.detailValue = true
        console.log("党建动图：", this.partyBannerData);
        console.log("党建列表:", this.partyNewsData);
        this.info()
    },
    methods: {
        info() {
            this.imageDataHeader = this.partyBannerData.data
            // this.dangjianData = this.partyNewsData.rows
        },
        detailClick(index) {

            this.indexValue = index
            console.log("id", this.dangjianData[this.indexValue]);
            this.partyNewsIdApi(this.dangjianData[this.indexValue].id)
        },
        back() {
            this.detailValue = true
        },
        goclick(indexs) {
            if (indexs == 0) {
                if (this.indexValue == 0) {
                    return
                }
                this.indexValue = this.indexValue - 1
                this.partyNewsIdApi(this.dangjianData[this.indexValue].id)
            } else {
                if (this.indexValue == this.dangjianData.length - 1) {
                    return
                }
                this.indexValue = this.indexValue + 1
                this.partyNewsIdApi(this.dangjianData[this.indexValue].id)
            }
        },

        partyNewsApi(params) {
            partyNews(params).then(res => {
                console.log(res);
                if (this.dangjianData.length == res.total) {
                    return
                } else {
                    this.dangjianData = [...this.dangjianData, ...res.rows]
                }

            }).catch(res => {

            })
        },
        // 滚动
        load() {
            this.ruleFrom.pageNum++
            console.log("滚动：：：", this.ruleFrom.pageNum);
            this.partyNewsApi(this.ruleFrom)
        },
        partyNewsIdApi(params) {
            this.loading = true
            partyNewsId(params).then(res => {
                console.log("详情:", res);
                this.loading = false
                this.detailValue = false
                this.detailData = res.data
            }).catch(res => {

            })
        }
    }
}
</script>
  
<style scoped lang="scss">
.index-image {
    position: relative;
    height: 550px;
    width: 100%;

    .navHader {
        position: absolute;
        width: 100%;
        padding: 0 160px;
        z-index: 999;
        bottom: 0px;
        left: 0px;
    }
}

.index_top_bg_img {
    width: 100%;
    height: 100%;
    position: relative;



}

$mobile-width: 0;
$pad-width: 576px;
$pc-width: 1024px;

@mixin mobile {
    @media (min-width: $mobile-width) {
        @content;
    }
}

@mixin pad {
    @media (min-width: $pad-width) {
        @content;
    }
}

@mixin pc {
    @media (min-width: $pc-width) {
        @content;
    }
}

.index_top_bg {
    @include mobile {

        height: 299px
    }

    @include pad {

        height: 299px
    }

    @include pc {

        height: 499px;
    }
}

.index_content {
    padding-top: 30px;
    padding-bottom: 65px;
}

.dangjian-main {
    margin-bottom: 11px;

    img {
        width: 60px;
        height: 60px;
        margin-right: 12px;
    }

    p {
        font-size: 24px;
        font-family: 'Source Han Sans CN-Bold, Source Han Sans CN';
        font-weight: 700;
        color: #B60000;
        margin: 0;
    }
}

.dangjian_main {
    width: 100%;
    height: 332px;
    border: 1px solid #2F6CBC;
    margin-bottom: 30px;

    .dangjian_img {
        padding: 25px;

        img {
            width: 456px;
            height: 280px;
        }
    }

    .dangjian_right {
        padding: 25px 25px 25px 0px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .dangjian_right_title {
            font-size: 24px;
            font-weight: 400;
            color: #3D3D3D;

        }

        .dangjian_right_time {
            font-size: 18px;
            font-weight: 400;
            color: #898989;
            margin-bottom: 140px;
        }

    }

    .dangjian_btn {
        width: 126px;
        height: 40px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #2F6CBC;
        font-size: 18px;

        img {
            margin-left: 10px;
            width: 24px;
            height: 24px;
        }
    }
}


.dangjain_detail_nav {
    padding: 0px 22px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;

    span {
        font-size: 18px;
    }

    img {
        width: 24px;
        height: 24px;
        margin: 0px 6px;
    }
}

.dangjian_detail_main {
    margin-top: 10px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    padding: 0 35px;

    .dangjian_detail_mains {
        padding: 20px 0px 30px 0px;

        img {
            max-width: 100%;
        }

        .dangjian_detail_mains_1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: 700;
            color: #000000;
        }

        .dangjian_detail_mains_2 {
            text-align: center;
            font-size: 16px;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #d5d5d5;
            margin-bottom: 30px;
        }

        .dangjian_detail_mains_3 {
            font-size: 16px;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #3D3D3D;
            line-height: 32px;
        }
    }

    .dangjian_detail_main_footer {
        padding: 0 22px;
        height: 125px;
        border-top: 1px solid #2F6CBC;

        span {
            font-size: 18px;
            font-weight: 400;
            color: #898989;

            &:hover {
                color: #2F6CBC;
            }
        }
    }
}
</style>
  